<template>
    <div class="trend" v-loading="monitorState.pictureLoading"   element-loading-text="加载中，请稍后...">
        <template v-if="monitorState.showtrend">
            <div class="trend_header" :style="getref()">
                <TrendHeader />
            </div>
            <div class="trend_time">
                <TrendTime />
            </div>
            <div class="trend_pict">
                <TrendPict ref="trendpict" />
            </div>
            <div class="trend_select">
                <TrendSelect />
            </div>
        </template>
    </div>
</template>

<script setup>
import TrendHeader from "./trend/TrendHeader.vue";
import TrendPict from "./trend/TrendPict.vue";
import TrendSelect from "./trend/TrendSelect.vue";
import TrendTime from "./trend/TrendTime.vue";

const trendpict = ref(null)
const { monitorStore, monitorState } = inject('MonitorStore')
const getref = () => {
    monitorState.echart = trendpict.value
}
onMounted(() => {
    // 通过 ref 获取子组件实例
    getref()
});

</script>

<style lang="scss" scoped>
.trend {
    flex: 1;
    border-top: 1px solid #ebebeb;
    display: flex;
    flex-direction: column;
}

.trend_header {
    height: 40px;
    background-color: #f8f9fa;
}

.trend_time {
    height: 32px;
    border-bottom: 1px solid #ebebeb;
}

.trend_pict {
    height: calc(100% - 122px);
}

.trend_select {
    height: 50px;
    border-top: 1px solid #ebebeb;
}
</style>

<style>
.trend .el-loading-text{
    color: #e92937 !important;
}
</style>
